<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一） | 海晨忆的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  
  
  <meta name="description" content="个人博客：haichenyi.com。感谢关注 简介Android里面刷新和分页加载是常见的，刷新有Google的SwipeRefreshLayout，但是UI不同意，非要跟IOS一样，那就没办法了。">
<meta property="og:type" content="article">
<meta property="og:title" content="Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）">
<meta property="og:url" content="https://haichenyi.com/2018/05/13/Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）/index.html">
<meta property="og:site_name" content="海晨忆的博客">
<meta property="og:description" content="个人博客：haichenyi.com。感谢关注 简介Android里面刷新和分页加载是常见的，刷新有Google的SwipeRefreshLayout，但是UI不同意，非要跟IOS一样，那就没办法了。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2018-05-13T14:37:49.782Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）">
<meta name="twitter:description" content="个人博客：haichenyi.com。感谢关注 简介Android里面刷新和分页加载是常见的，刷新有Google的SwipeRefreshLayout，但是UI不同意，非要跟IOS一样，那就没办法了。">
  
    <link rel="alternate" href="/atom.xml" title="海晨忆的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/uploads/artistic_image/head.jpg">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/highlight.css">
  <script>
  let antiquityStorage = window.sessionStorage.getItem('antiquitySessionStorage');
  if (antiquityStorage == '' || antiquityStorage == null) {
    var antiquityLoader = '<div id="loaderbox"><div class="loader"><div class="load-roll"><div class="load-top"></div><div class="load-right"></div><div class="load-bottom"></div></div></div></div>';
    document.write(antiquityLoader);
    document.body.style.overflow = 'hidden'
  }
  </script>
</head>

<body>
  <div id="fullpage" class="mobile-nav-right">
    
      <div id="wrapper" style="background-image: url(/uploads/artistic_image/bg.jpg)" title="背景图片来自网络">
    
    
      <header id="header">
  <div id="nav-toggle" class="nav-toggle"></div>
  <div class="head-box global-width">
    <nav class="nav-box nav-right">
      
        <a class="nav-item" href="/" title
        
        >首页</a>
      
        <a class="nav-item" href="/archives" title
        
        >归档</a>
      
        <a class="nav-item" href="/about" title
        
        >简历</a>
      
    </nav>
  </div>
</header>
      <div id="middlecontent" title class="global-width sidebar-left">
        <section id="main"><article id="post-Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）" class="article global-container article-type-post" itemscope itemprop="blogPost">
  
    <header class="article-header">
      
  
    <h1 class="article-title" itemprop="name">
      Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）
    </h1>
  

    </header>
  
  <div class="article-meta">
    <a href="/2018/05/13/Android下拉刷新，上拉加载——Ultra-Pull-To-Refresh-With-Load-More（一）/" class="article-date">
  <time datetime="2018-05-13T14:26:34.000Z" itemprop="datePublished">2018-05-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Android-常用功能/">Android -常用功能</a>
  </div>

    
  </div>
  
    <span id="busuanzi_container_page_pv">
      本文总阅读量<span id="busuanzi_value_page_pv"></span>次
    </span>
  

  <div class="article-inner">
    
    <div class="article-content article-content-cloud doorframe mac" itemprop="articleBody">
      
        <p><strong>个人博客：haichenyi.com。感谢关注</strong></p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>Android里面刷新和分页加载是常见的，刷新有Google的SwipeRefreshLayout，但是UI不同意，非要跟IOS一样，那就没办法了。</p>
 <a id="more"></a>
<p>开源框架链接：<a href="https://github.com/captainbupt/android-Ultra-Pull-To-Refresh-With-Load-More" target="_blank" rel="noopener">Ultra-Pull-To-Refresh-With-Load-More</a>。这个开源框架是基于<a href="https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh" target="_blank" rel="noopener">Ultra-Pull-To-Refresh</a>拓展了一个上拉加载功能。</p>
<p>作者：<a href="https://github.com/liaohuqiu" target="_blank" rel="noopener">廖祜秋</a></p>
<h2 id="依赖"><a href="#依赖" class="headerlink" title="依赖"></a>依赖</h2><div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">implementation &apos;in.srain.cube:ptr-load-more:1.0.6&apos;</span><br></pre></td></tr></table></figure></div>
<h2 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h2><p>整个项目就只有一个核心类：PtrFrameLayout，继承ViewGroup。步骤：</p>
<ol>
<li><p>xml里面定义控件PtrFrameLayout</p>
</li>
<li><p>设置相关属性</p>
</li>
<li><p>添加Header，Footer，并监听</p>
</li>
<li><p>监听刷新过程</p>
</li>
</ol>
<h3 id="第一步：xml里面定义控件PtrFrameLayout"><a href="#第一步：xml里面定义控件PtrFrameLayout" class="headerlink" title="第一步：xml里面定义控件PtrFrameLayout"></a>第一步：xml里面定义控件PtrFrameLayout</h3><div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span><br><span class="line">&lt;in.srain.cube.views.ptr.PtrFrameLayout</span><br><span class="line">    android:id=&quot;@+id/ptr_frame_layout&quot;</span><br><span class="line">    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;</span><br><span class="line">    android:layout_width=&quot;match_parent&quot;</span><br><span class="line">    android:layout_height=&quot;match_parent&quot;</span><br><span class="line">    xmlns:cube_ptr=&quot;http://schemas.android.com/apk/res-auto&quot;</span><br><span class="line"></span><br><span class="line">    cube_ptr:ptr_resistance_header=&quot;1.7&quot;</span><br><span class="line">    cube_ptr:ptr_ratio_of_header_height_to_refresh=&quot;1.2&quot;</span><br><span class="line">    cube_ptr:ptr_duration_to_back_header=&quot;300&quot;</span><br><span class="line">    cube_ptr:ptr_duration_to_close_header=&quot;2000&quot;</span><br><span class="line">    cube_ptr:ptr_keep_header_when_refresh=&quot;true&quot;</span><br><span class="line">    cube_ptr:ptr_pull_to_fresh=&quot;false&quot;</span><br><span class="line"></span><br><span class="line">    cube_ptr:ptr_resistance_footer=&quot;1.3&quot;</span><br><span class="line">    cube_ptr:ptr_duration_to_back_footer=&quot;300&quot;</span><br><span class="line">    cube_ptr:ptr_duration_to_close_footer=&quot;2000&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;LinearLayout</span><br><span class="line">        android:layout_width=&quot;match_parent&quot;</span><br><span class="line">        android:layout_height=&quot;match_parent&quot;</span><br><span class="line">        android:orientation=&quot;vertical&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;TextView</span><br><span class="line">            android:layout_width=&quot;match_parent&quot;</span><br><span class="line">            android:layout_height=&quot;match_parent&quot;</span><br><span class="line">            android:background=&quot;@color/colorAccent&quot;</span><br><span class="line">            android:gravity=&quot;center&quot;</span><br><span class="line">            android:text=&quot;textView&quot;/&gt;</span><br><span class="line">    &lt;/LinearLayout&gt;</span><br><span class="line">&lt;/in.srain.cube.views.ptr.PtrFrameLayout&gt;</span><br></pre></td></tr></table></figure></div>
<p>上面就是一个简单的布局，根布局是 <strong><em>PtrFrameLayout</em></strong> ，他的子View可以是任意view。</p>
<h3 id="第二步：设置相关属性"><a href="#第二步：设置相关属性" class="headerlink" title="第二步：设置相关属性"></a>第二步：设置相关属性</h3><p>我们也看到了，他的布局里面有一些自定义属性，可以在布局里面设置，也可以在java代码里面设置，相关属性含义如下：</p>
<ol>
<li><p>Resistence：阻尼系数，可以分别设置header和footer。默认: 1.7f，越大，感觉下拉刷新时越吃力。上拉加载也是一样的</p>
</li>
<li><p>Ratio of the Height of the Header to Refresh：触发刷新时移动的位置比例。<br>默认，1.2f，移动达到头部高度1.2倍时可触发刷新操作。下拉刷新，上拉加载都一样。</p>
</li>
<li><p>Duration to Close back：回弹延时。默认 200ms，回弹到刷新或者高度所用时间，可以跟上面一样分开设置，也可以设置一个</p>
</li>
<li><p>Duration to Close Header：刷新完成之后隐藏头部的时间。默认1000ms<strong><em>cube_ptr:ptr_duration_to_close_either=”2000”</em></strong></p>
</li>
<li><p>Keep Header while Refreshing：刷新是保持头部，也就是显示头部。默认值 true。false：隐藏头部</p>
</li>
<li><p>Pull to Refresh / Release to Refresh：下拉刷新 / 释放刷新。<br>默认为释放的时候刷新</p>
</li>
</ol>
<p>在java代码中设置方式如下：</p>
<div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">final PtrFrameLayout ptrFrameLayout = findViewById(R.id.ptr_frame_layout);</span><br><span class="line">//配置头部参数,可以在xml中设置</span><br><span class="line">// the following are default settings</span><br><span class="line">    ptrFrameLayout.setResistance(1.7f);</span><br><span class="line">    ptrFrameLayout.setRatioOfHeaderHeightToRefresh(1.2f);</span><br><span class="line">    ptrFrameLayout.setDurationToClose(200);</span><br><span class="line">    ptrFrameLayout.setDurationToCloseHeader(1000);</span><br><span class="line">// default is false</span><br><span class="line">    ptrFrameLayout.setPullToRefresh(false);</span><br><span class="line">// default is true</span><br><span class="line">    ptrFrameLayout.setKeepHeaderWhenRefresh(true);</span><br></pre></td></tr></table></figure></div>
<h2 id="第三步：添加Header，Footer，并监听"><a href="#第三步：添加Header，Footer，并监听" class="headerlink" title="第三步：添加Header，Footer，并监听"></a>第三步：添加Header，Footer，并监听</h2><div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">//第一种头部,StoreHouse风格的头部实现</span><br><span class="line">    /*StoreHouseHeader storeHouseHeader = new StoreHouseHeader(this);</span><br><span class="line">    storeHouseHeader.setPadding(0,100,0,0);</span><br><span class="line">    storeHouseHeader.setBackgroundColor(Color.BLACK);</span><br><span class="line">    storeHouseHeader.setTextColor(Color.WHITE);</span><br><span class="line">    storeHouseHeader.initWithString(&quot;haichenyi&quot;);//只可英文，中文不可运行(添加时间)</span><br><span class="line">    ptrFrameLayout.setHeaderView(storeHouseHeader);</span><br><span class="line">    ptrFrameLayout.addPtrUIHandler(storeHouseHeader);*/</span><br><span class="line"></span><br><span class="line">    //第二种头部,Material Design风格的头部实现,类似SwipeRefreshLayout</span><br><span class="line">    /*MaterialHeader materialHeader = new MaterialHeader(this);</span><br><span class="line">    materialHeader.setColorSchemeColors(new int[]&#123;Color.RED, Color.GREEN, Color.BLUE&#125;);</span><br><span class="line">    ptrFrameLayout.setHeaderView(materialHeader);</span><br><span class="line">    ptrFrameLayout.addPtrUIHandler(materialHeader);*/</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    //第三种头部,经典 风格的头部实现，下拉箭头+时间</span><br><span class="line">    PtrClassicDefaultHeader ptrClassicDefaultHeader = new PtrClassicDefaultHeader(this);</span><br><span class="line">    ptrFrameLayout.setHeaderView(ptrClassicDefaultHeader);</span><br><span class="line"></span><br><span class="line">    PtrClassicDefaultFooter ptrClassicDefaultFooter = new PtrClassicDefaultFooter(this);</span><br><span class="line">    ptrFrameLayout.setFooterView(ptrClassicDefaultFooter);</span><br><span class="line"></span><br><span class="line">    ptrFrameLayout.addPtrUIHandler(ptrClassicDefaultHeader);</span><br><span class="line">    ptrFrameLayout.addPtrUIHandler(ptrClassicDefaultFooter);</span><br></pre></td></tr></table></figure></div>
<p>如上面代码所示，Header，Footer的种类是一样的，Header有三种，Footer也有三种，定义好之后，通过 <strong>setHeaderView()</strong>, <strong>setFooterView()</strong> 添加到 <strong>ptrFrameLayout</strong> 中，然后通过调用 <strong>addPtrUIHandler</strong> 监听两者的状态即可。不监听会显示空白，看不到具体内容</p>
<h2 id="第四步：监听刷新过程"><a href="#第四步：监听刷新过程" class="headerlink" title="第四步：监听刷新过程"></a>第四步：监听刷新过程</h2><div class="highlight-box"autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true"data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">ptrFrameLayout.setPtrHandler(new PtrDefaultHandler2() &#123;</span><br><span class="line">      @Override</span><br><span class="line">      public void onLoadMoreBegin(PtrFrameLayout frame) &#123;</span><br><span class="line">        frame.postDelayed(ptrFrameLayout::refreshComplete, 2000);</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      @Override</span><br><span class="line">      public void onRefreshBegin(PtrFrameLayout frame) &#123;</span><br><span class="line">        frame.postDelayed(ptrFrameLayout::refreshComplete, 2000);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    ptrFrameLayout.setMode(PtrFrameLayout.Mode.LOAD_MORE);</span><br></pre></td></tr></table></figure></div>
<p>通过设置 <strong>setPtrHandler()</strong> 方法监听刷新过程。默认的是 <strong>PtrDefaultHandler2()</strong>,它是后来加的，包括刷新和加载。<strong>PtrDefaultHandler()</strong> 只包含刷新功能。通过setMode()方法设置：只要下拉刷新，或者只要上拉加载，或者两者都要。</p>

      
    </div>
    
      <footer class="article-footer">
        完
      </footer>
    
  </div>
  
    
<nav id="article-nav">
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））/" id="article-nav-newer" class="article-nav-link-wrap">
        <strong class="article-nav-caption"></strong>
        <div class="article-nav-title">
          
            Android自定义刷新布局——Ultra-Pull-To-Refresh-With-Load-More（二））
          
        </div>
      </a>
    
  </div>
  <div class="article-nav-block">
    
      <a href="/2018/05/13/Java-加密算法（二）/" id="article-nav-older" class="article-nav-link-wrap">
        <div class="article-nav-title">Java 加密算法（二）</div>
        <strong class="article-nav-caption"></strong>
      </a>
    
  </div>
</nav>

    
  
  
</article>
</section>
        <aside id="sidebar">
  
    <div class="widget-box">
  <div class="avatar-box avatar-item">
    <img class="avatar" src="/uploads/artistic_image/head.jpg" title="头像来自网络"></img>
    <h3 class="avatar-name">
      
        海晨忆
      
    </h3>
    <p class="avatar-slogan">
      先谋生，再谋爱。人间值得，未来可期。
    </p>
  </div>
</div>


  
    
  <div class="widget-box">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Android-Socket/">Android -Socket</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-加密算法/">Android -加密算法</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-常用功能/">Android -常用功能</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-框架/">Android -框架</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-源码解析/">Android -源码解析</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-自定义view/">Android -自定义view</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Android-设计模式/">Android -设计模式</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JAVA-并发/">JAVA -并发</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java-SpringBoot/">Java -SpringBoot</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Tomcat/">Tomcat</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/kotlin/">kotlin</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-JDBC/">数据库 -JDBC</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库-MySQL/">数据库 -MySQL</a></li></ul>
    </div>
  </div>


  
    

  
    
  
    
  <div class="widget-box">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">July 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">October 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">May 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">March 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">February 2018</a></li></ul>
    </div>
  </div>

  
    
  <div class="widget-box">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/07/27/JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁/">JAVA—公平锁，非公平锁，悲观锁，乐观锁，死锁</a>
          </li>
        
          <li>
            <a href="/2021/07/19/JAVA—线程同步器AQS/">JAVA—线程同步器AQS</a>
          </li>
        
          <li>
            <a href="/2021/07/07/Android模拟点击/">Android模拟点击</a>
          </li>
        
          <li>
            <a href="/2019/11/27/SpringBoot系列-消息-RabbitMQ-（二十）/">SpringBoot系列-消息(RabbitMQ)（二十）</a>
          </li>
        
          <li>
            <a href="/2019/11/13/SpringBoot系列-Docker（十九）/">SpringBoot系列-Docker（十九）</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-box">
    <h3 class="widget-title">友情链接</h3>
    <div class="widget">
      
        <a class="hrf" style="display: block;" href="https://github.com/haichenyi" title target='_blank'
        >Github</a>
      
        <a class="hrf" style="display: block;" href="https://www.jianshu.com/u/6077ee440c37" title target='_blank'
        >简书</a>
      
        <a class="hrf" style="display: block;" href="https://blog.csdn.net/qq_27634797" title target='_blank'
        >CSDN</a>
      
    </div>
  </div>

  
</aside>
      </div>
      <footer id="footer">
  <div class="foot-box footers global-width">
    &copy;2017-2021 海晨忆 &nbsp;&nbsp;
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">阁下是第<span id="busuanzi_value_site_pv"></span>个访客</span>
  </div>
</footer>
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
if (!window.jQuery) {
var script = document.createElement('script');
script.src = "/js/jquery-2.0.3.min.js";
document.body.write(script);
}
</script>

  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    </div>
    <nav id="mobile-nav" class="mobile-nav-box">
  <div class="mobile-nav-img mobile-nav-top"></div>
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">归档</a>
  
    <a href="/about" class="mobile-nav-link">简历</a>
  
  <div class="mobile-nav-img  mobile-nav-bottom"></div>
</nav>    
  </div>
</body>
</html>